<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-header">
      <view class="search-bar" @tap="goToSearch">
        <text class="iconfont icon-search"></text>
        <text class="placeholder">搜索课程/资源/服务</text>
        <button class="search-btn">搜索</button>
      </view>
      <!-- 热门标签 -->
      <scroll-view class="city-tags" scroll-x>
        <view class="tag-list">
          <view class="tag" :class="{ active: currentTag === '全部' }">全部</view>
          <view class="tag">课程</view>
          <view class="tag">资源</view>
          <view class="tag">考试</view>
          <view class="tag">作业</view>
          <view class="tag">活动</view>
        </view>
      </scroll-view>
    </view>

    <!-- 通知栏 -->
    <view class="notice-bar">
      <text class="notice-icon iconfont icon-notice"></text>
      <swiper class="notice-swiper" vertical autoplay circular interval="3000">
        <swiper-item v-for="(notice, index) in notices" :key="index">
          <view class="notice-item">{{ notice }}</view>
        </swiper-item>
      </swiper>
      <text class="notice-more" @tap="viewAllNotices">更多</text>
    </view>

    <!-- 功能导航 - 教学智能化 -->
    <view class="module-title">
      <text class="title">教学智能化</text>
      <text class="desc">智慧课堂，沉浸式学习</text>
    </view>

    <view class="nav-grid">
      <view class="nav-row">
        <view class="nav-item" @tap="navTo('互动教学')">
          <image src="http://101.37.17.240:9000/zhxy/互动教学.png" mode="aspectFit"></image>
          <text>智能搜题</text>
        </view>
        <view class="nav-item" @tap="navTo('虚拟仿真')">
          <image src="http://101.37.17.240:9000/zhxy/虚拟仿真.png" mode="aspectFit"></image>
          <text>虚拟仿真</text>
        </view>
        <view class="nav-item" @tap="navTo('课程资源')">
          <image src="http://101.37.17.240:9000/zhxy/课程资源.png" mode="aspectFit"></image>
          <text>课程资源</text>
        </view>
        <view class="nav-item" @tap="navTo('在线测评')">
          <image src="http://101.37.17.240:9000/zhxy/在线测评.png" mode="aspectFit"></image>
          <text>在线考试</text>
        </view>
      </view>
    </view>

    <!-- 管理高效化 -->
    <view class="module-title">
      <text class="title">管理高效化</text>
      <text class="desc">智能管理，畅享校园</text>
    </view>

    <view class="nav-grid">
      <view class="nav-row">
        <view class="nav-item" @tap="navTo('数据中心')">
          <image src="http://101.37.17.240:9000/zhxy/数据中心.png" mode="aspectFit"></image>
          <text>课程管理</text>
          <view v-if="isFaculty" class="tag-role">教师</view>
        </view>
        <view class="nav-item" @tap="navTo('考勤管理')">
          <image src="http://101.37.17.240:9000/zhxy/考勤管理.png" mode="aspectFit"></image>
          <text>考勤管理</text>
          <view v-if="isFaculty" class="tag-role">教师</view>
        </view>
        <view class="nav-item" @tap="navTo('教学计划')">
          <image src="http://101.37.17.240:9000/zhxy/教学计划.png" mode="aspectFit"></image>
          <text>成绩管理</text>
          <view v-if="isFaculty" class="tag-role">教师</view>
        </view>
        <view class="nav-item" @tap="navTo('安全监控')">
          <image src="http://101.37.17.240:9000/zhxy/安全监控.png" mode="aspectFit"></image>
          <text>教学计划</text>
          <view v-if="isFaculty" class="tag-role">教师</view>
        </view>
      </view>
    </view>

    <!-- 服务便捷化 -->
    <view class="module-title">
      <text class="title">服务便捷化</text>
      <text class="desc">一站服务，智慧生活</text>
    </view>

    <view class="nav-grid">
      <view class="nav-row">
        <view class="nav-item" @tap="navTo('校园服务')">
          <image src="http://101.37.17.240:9000/zhxy/校园服务.png" mode="aspectFit"></image>
          <text>校园服务</text>
        </view>
        <view class="nav-item" @tap="navTo('家校互联')">
          <image src="http://101.37.17.240:9000/zhxy/家校互联.png" mode="aspectFit"></image>
          <text>图书借阅</text>
        </view>
        <view class="nav-item" @tap="navTo('一站办事')">
          <image src="http://101.37.17.240:9000/zhxy/一站办事.png" mode="aspectFit"></image>
          <text>在线请假</text>
        </view>
        <view class="nav-item" @tap="navTo('信息管理')">
          <image src="http://101.37.17.240:9000/zhxy/信息管理.png" mode="aspectFit"></image>
          <text>校园缴费</text>
        </view>
      </view>
    </view>

    <!-- 推荐课程 -->
    <view class="section">
      <view class="section-header">
        <view class="location">
          <text class="icon-star"></text>
          <text>推荐课程</text>
        </view>
        <text class="more" @tap="goToCourses">更多</text>
      </view>
      <view class="content-list">
        <view class="content-item" v-for="(item, index) in recommendCourses" :key="index" @tap="goToCourseDetail(item)">
          <image :src="item.coverImage" mode="aspectFill"></image>
          <view class="info">
            <view class="title text-ellipsis-2">{{item.title}}</view>
            <view class="meta">
              <image class="avatar" :src="item.teacher.avatarUrl" mode="aspectFill"></image>
              <text class="name">{{item.teacher.name}}</text>
              <text class="views">{{item.enrollCount}}人学习</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 校园动态 -->
    <view class="section">
      <view class="section-header">
        <view class="location">
          <text class="icon-news"></text>
          <text>校园动态</text>
        </view>
        <text class="more" @tap="goToNews">更多</text>
      </view>
      <view class="news-list">
        <view class="news-item" v-for="(item, index) in campusNews" :key="index" @tap="goToNewsDetail(item)">
          <view class="news-content">
            <view class="news-title text-ellipsis-2">{{item.title}}</view>
            <view class="news-time">{{item.publishTime}}</view>
          </view>
          <image class="news-image" :src="item.coverImage" mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <!-- AI助手入口 -->
    <view class="ai-assistant-entry" @click="goToAIChat">
      <image src="http://101.37.17.240:9000/zhxy/AI助手.png" mode="aspectFill"></image>
      <view class="assistant-text">
        <view class="title">智能助手</view>
        <view class="desc">点击咨询</view>
      </view>
    </view>

  </view>
</template>

<script>
import { checkNeedLogin, isLoggedIn, isFaculty } from '@/utils/auth'

export default {
  data() {
    return {
      currentTag: '全部',
      isFaculty: false,
      notices: [
        '关于本学期教学评价系统开放的通知',
        '五一假期校园门禁系统调整通知',
        '下周二全校智慧教学系统升级维护通知'
      ],
      recommendCourses: [
        {
          id: 1,
          title: '高等数学 - 微积分与线性代数应用',
          coverImage: 'http://101.37.17.240:9000/zhxy/course1.jpg',
          teacher: {
            id: 101,
            name: '王教授',
            avatarUrl: 'http://101.37.17.240:9000/zhxy/teacher1.jpg'
          },
          enrollCount: 328
        },
        {
          id: 2,
          title: 'Python程序设计 - 从入门到实践',
          coverImage: 'http://101.37.17.240:9000/zhxy/course2.jpg',
          teacher: {
            id: 102,
            name: '李博士',
            avatarUrl: 'http://101.37.17.240:9000/zhxy/teacher2.jpg'
          },
          enrollCount: 256
        }
      ],
      campusNews: [
        {
          id: 1,
          title: '我校在全国高校智慧教育创新大赛中荣获一等奖',
          publishTime: '2023-04-20',
          coverImage: 'http://101.37.17.240:9000/zhxy/news1.jpg'
        },
        {
          id: 2,
          title: '校园智能导览系统正式上线，扫码即可全景导航',
          publishTime: '2023-04-18',
          coverImage: 'http://101.37.17.240:9000/zhxy/news2.jpg'
        },
        {
          id: 3,
          title: '学校与科技企业共建"智慧教学实验室"签约仪式举行',
          publishTime: '2023-04-15',
          coverImage: 'http://101.37.17.240:9000/zhxy/news3.jpg'
        }
      ]
    }
  },
  onLoad() {
    this.checkUserType();
  },
  methods: {
    checkUserType() {
      // 检查是否是教师用户
      this.isFaculty = isFaculty();
    },
    goToSearch() {
      uni.navigateTo({
        url: '/pages/search/index'
      })
    },
    viewAllNotices() {
      uni.navigateTo({
        url: '/pages/notices/index'
      })
    },
    navTo(type) {
      // 权限检查
      if(['考勤管理', '教学计划', '安全监控', '数据中心'].includes(type) && !this.isFaculty) {
        uni.showToast({
          title: '该功能仅对教师开放',
          icon: 'none'
        });
        return;
      }
      
      // 检查是否需要登录
      if(checkNeedLogin()) {
        return;
      }
      
      // 导航到对应页面
      console.log('导航到:', type);
      uni.navigateTo({
        url: `/pages/${this.getPagePath(type)}`
      })
    },
    getPagePath(type) {
      // 根据类型获取对应的页面路径
      const pathMap = {
        '互动教学': 'message/search-questions',
        '虚拟仿真': 'teaching/simulation',
        '课程资源': 'teaching/resources',
        '在线测评': 'teaching/assessment',
        '信息管理': 'management/info',
        '考勤管理': 'management/attendance',
        '教学计划': 'management/plan',
        '安全监控': 'management/security',
        '校园服务': 'service/campus',
        '家校互联': 'service/family',
        '一站办事': 'service/onestop',
        '数据中心': 'service/datacenter'
      }
      return pathMap[type] || 'index/index'
    },
    goToCourseDetail(course) {
      uni.navigateTo({
        url: `/pages/teaching/course-detail?id=${course.id}`
      })
    },
    goToCourses() {
      uni.navigateTo({
        url: '/pages/teaching/courses'
      })
    },
    goToNewsDetail(news) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${news.id}`
      })
    },
    goToNews() {
      uni.navigateTo({
        url: '/pages/news/list'
      })
    },
    goToAIChat() {
      uni.navigateTo({
        url: '/pages/message/ai-chat'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding-bottom: 100rpx;
}

.search-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #4080ff;
  padding: 20rpx 30rpx;

  .search-bar {
    display: flex;
    align-items: center;
    height: 72rpx;
    background: #fff;
    border-radius: 36rpx;
    padding: 0 30rpx;
    
    .icon-search {
      font-size: 32rpx;
      color: #999;
      margin-right: 10rpx;
    }
    
    .placeholder {
      flex: 1;
      font-size: 28rpx;
      color: #999;
    }

    .search-btn {
      width: 120rpx;
      height: 56rpx;
      line-height: 56rpx;
      background: #4080ff;
      color: #fff;
      font-size: 28rpx;
      border-radius: 28rpx;
    }
  }

  .city-tags {
    margin-top: 20rpx;
    white-space: nowrap;

    .tag-list {
      display: inline-flex;
      padding: 0 10rpx;
    }

    .tag {
      padding: 10rpx 30rpx;
      font-size: 28rpx;
      color: #fff;
      margin-right: 20rpx;

      &.active {
        background: rgba(255,255,255,0.2);
        border-radius: 30rpx;
      }
    }
  }
}

.notice-bar {
  display: flex;
  align-items: center;
  background: #fff8e6;
  padding: 15rpx 30rpx;
  margin-top: 180rpx;
  
  .notice-icon {
    font-size: 40rpx;
    color: #ff9800;
    margin-right: 20rpx;
  }
  
  .notice-swiper {
    flex: 1;
    height: 60rpx;
    
    .notice-item {
      font-size: 28rpx;
      color: #333;
      line-height: 60rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  
  .notice-more {
    font-size: 26rpx;
    color: #4080ff;
    margin-left: 20rpx;
  }
}

.module-title {
  padding: 30rpx 30rpx 10rpx;
  display: flex;
  flex-direction: column;
  
  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
  }
  
  .desc {
    font-size: 24rpx;
    color: #999;
    margin-top: 6rpx;
  }
}

.nav-grid {
  background: #fff;
  padding: 20rpx 30rpx 30rpx;

  .nav-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140rpx;

    image {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 10rpx;
    }

    text {
      font-size: 24rpx;
      color: #333;
    }

    .tag-role {
      position: absolute;
      top: -10rpx;
      right: 0;
      background: #4080ff;
      color: #fff;
      font-size: 20rpx;
      padding: 2rpx 10rpx;
      border-radius: 10rpx;
    }
  }
}

.section {
  background: #fff;
  padding: 30rpx;
  margin-top: 20rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .location {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;

      .icon-star, .icon-news {
        font-size: 36rpx;
        margin-right: 10rpx;
      }
    }

    .more {
      font-size: 24rpx;
      color: #999;
    }
  }

  .content-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10rpx;

    .content-item {
      width: calc(50% - 20rpx);
      margin: 10rpx;
      background: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);

      image {
        width: 100%;
        height: 200rpx;
        border-radius: 12rpx 12rpx 0 0;
      }

      .info {
        padding: 16rpx;

        .title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 12rpx;
          line-height: 1.4;
        }

        .meta {
          display: flex;
          align-items: center;

          .avatar {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            margin-right: 10rpx;
          }

          .name {
            font-size: 24rpx;
            color: #666;
            margin-right: 20rpx;
          }

          .views {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
  
  .news-list {
    .news-item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      .news-content {
        flex: 1;
        margin-right: 20rpx;
        
        .news-title {
          font-size: 28rpx;
          color: #333;
          line-height: 1.5;
          margin-bottom: 10rpx;
        }
        
        .news-time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .news-image {
        width: 160rpx;
        height: 120rpx;
        border-radius: 8rpx;
      }
    }
  }
}

.ai-assistant-entry {
  position: fixed;
  right: 30rpx;
  bottom: 140rpx;
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(64, 128, 255, 0.9);
  padding: 20rpx 30rpx;
  border-radius: 100rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
  
  image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  
  .assistant-text {
    color: #fff;
    
    .title {
      font-size: 28rpx;
      font-weight: bold;
    }
    
    .desc {
      font-size: 22rpx;
      opacity: 0.9;
    }
  }
}

.text-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style> 